<template>
	<view class="">
		<!-- 优惠券 -->
		<view class="coupon-item" v-if="detail">
			<view class="left flex">
				<view class="amount">
					<text class="value">{{ (detail.discountPrice / 100).toFixed(0) }}</text>
				</view>
				<text class="desc">满{{ (detail.usePrice / 100).toFixed(0) }}可用</text>
			</view>
			<view class="right">
				<text class="title">{{ detail.name }}</text>
				<text class="date">有效期: {{ formatDate(detail.validStartTime) }} - {{ formatDate(detail.validEndTime) }}</text>
				<view class="flex" style="justify-content: space-between;">
					<view class="flex" style="align-items: center;">
						<text class="rules" @click="showRules">使用规则</text>
						<u-icon name="arrow-right" color="#868686" size="22rpx"></u-icon>
					</view>
					<view class="btn" v-if="detail.status === 1" @click="useCoupon(detail)">
						<text>去使用</text>
					</view>
				</view>
			</view>
			<view class="status flex" :class="{
				'no-user': detail.status === 1,
				'used': detail.status === 2,
				'expired': detail.status === 3
			}">
				<text class="text">{{ statusText }}</text>
			</view>
		</view>

		<!-- 优惠券明细 -->
		<view class="coupon-detail">
			<view class="detail-title">优惠券明细</view>
			<view class="detail-item">
				<text class="label">领取时间</text>
				<text class="value">2024-05-05 08:42:52</text>
			</view>
			<view class="detail-item">
				<text class="label">使用时间</text>
				<text class="value">--</text>
			</view>
			<view class="detail-item">
				<text class="label">订单编号</text>
				<text class="value">--</text>
			</view>
		</view>

		<!-- 使用说明 -->
		<view class="usage-rules">
			<view class="rules-title">使用说明</view>
			<view class="rules-list">
				<view class="rule-item">1.这是说使用说明这是说使用说明这是说使用说明这是说使用</view>
				<view class="rule-item">2.这是说使用说明这是说使用说明这是说使用说明</view>
				<view class="rule-item">3.这是说使用说明</view>
				<view class="rule-item">4.这是说使用说明这是说使用说明</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				detail: null,
			}
		},
		onLoad({ id }) {
			this.id = id;
			this.getCouponDetail();
		},
		methods: {
			useCoupon(coupon) {
				if(coupon.status !== 1) return
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getCouponDetail() {
				this.$http_api.couponDetail({ id: this.id }).then(res => {
					this.detail = res;
				})
			},
			showRules(coupon) {
				uni.showModal({
					title: '使用规则',
					content: this.detail.description,
					showCancel: false
				})
			},
			formatDate(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			}
		},
		computed: {
			statusText() {
				const statusMap = {
					1: '待使用',
					2: '已使用',
					3: '已过期'
				}
				return statusMap[this.detail?.status] || ''
			}
		}
	}
</script>

<style scoped lang="scss">
	.coupon-item {
		display: flex;
		background: #fff;
		border-radius: 24rpx;
		margin: 20rpx;
		overflow: hidden;
		position: relative;
		
		.status {
			position: absolute;
			right: 0;
			top: 0;
			background: #AAAAAA;
			width: 90rpx;
			height: 40rpx;
			justify-content: center;
			border-bottom-left-radius: 28rpx;
			.text {
				font-size: 20rpx;
				font-weight: 400;
				color: #fff;
				font-family: "PINGFANG";
			}
			&.no-user {
				background: #FF4600;
			}
			&.used {
				background: #999999;
			}
			&.expired {
				background: #CCCCCC;
			}
		}
		
		.left {
			flex-direction: column;
			justify-content: center;
			width: 200rpx;
			height: 200rpx;
			background: linear-gradient(140deg, #1C6EFB, #02D9C3);
			position: relative;
			
			&::after, &::before {
				content: '';
				width: 20rpx;
				height: 20rpx;
				border-radius: 100%;
				background: #fff;
				position: absolute;
				right: -10rpx;
			}
			
			&::before {
				top: -10rpx;
			}
			
			&::after {
				bottom: -10rpx;
			}
			
			.amount {
				display: flex;
				align-items: baseline;
				
				.value {
					font-size: 80rpx;
					color: #fff;
					font-weight: 600;
					font-family: "PINGFANG";
				}
			}
			
			.desc {
				font-size: 24rpx;
				color: #fff;
				font-weight: 600;
			}
		}
		
		.right {
			flex: 1;
			padding-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: 600;
				font-family: "PINGFANG";
			}
			
			.date {
				font-size: 24rpx;
				color: #999;
				margin: 10rpx 0 20rpx;
			}
			
			.btn {
				width: 160rpx;
				height: 60rpx;
				background: #42E0A2;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				text {
					font-size: 24rpx;
					font-family: "PINGFANG";
					color: #fff;
				}
				
				&.used {
					background: #999;
				}
				
				&.expired {
					background: #ddd;
				}
			}
			
			.rules {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
	
	.coupon-detail {
		background: #fff;
		border-radius: 24rpx;
		margin: 20rpx;
		padding: 30rpx;

		.detail-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 30rpx;
			font-family: "PINGFANG";
		}

		.detail-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.label {
				font-size: 28rpx;
				color: #666;
				font-family: "PINGFANG";
			}

			.value {
				font-size: 28rpx;
				color: #333;
				font-family: "PINGFANG";
			}
		}
	}

	.usage-rules {
		border-radius: 24rpx;
		margin: 20rpx;
		padding: 0 30rpx 30rpx 30rpx;

		.rules-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 30rpx;
			font-family: "PINGFANG";
		}

		.rules-list {
			.rule-item {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				margin-bottom: 10rpx;
				font-family: "PINGFANG";
			}
		}
	}
</style>